<template>
  <!-- 访客记录-详情 -->
  <public-modal
    :footer="false"
    :publicVisible="publicVisible"
    cancelContext="拒绝"
    confirmContext="通过"
    modalStyle="detailModal"
    title="详情页"
    width="700px"
    @cancel="cancel"
    @handleOk="handleOk"
  >
    <div slot="content">
      <table>
        <tr>
          <td class="td-label">旅馆名称</td>
          <td class="td-value" colspan="3">
            {{ details.companyMessageName }}
          </td>
        </tr>

        <tr>
          <td class="td-label">营业地址</td>
          <td class="td-value" colspan="3">
            {{ details.companyAddressDetail }}
          </td>
        </tr>

        <tr>
          <td class="td-label">房客姓名</td>
          <td class="td-value">{{ details.personName }}</td>
          <td class="td-label" rowspan="5">头像图片</td>
          <td class="td-value" rowspan="5" style="padding: 0; text-align: center">
            <img
              v-if="details.personImage"
              id="personImage"
              :data-original="imgPrefix + details.personImage"
              :src="imgPrefix + details.personImage"
              style="width: 170px; height: 210px; border-radius: 8px; object-fit: cover; cursor: pointer"
              @click="werImg('personImage')"
            />
            <span v-else>暂无</span>
          </td>
        </tr>
        <tr>
          <td class="td-label">性 别</td>
          <td class="td-value">{{ details.sex == 1 ? '男' : '女' }}</td>
        </tr>
        <tr>
          <td class="td-label">年 龄</td>
          <td class="td-value">{{ get_age(details.birth) }}</td>
        </tr>
        <tr>
          <td class="td-label">身份证号</td>
          <td class="td-value">{{ details.idCard }}</td>
        </tr>
        <tr>
          <td class="td-label">证件照片</td>
          <td class="td-value" v-if="details.idCardUrl">
            <img
              id="idCardUrl"
              :data-original="imgPrefix + details.idCardUrl"
              :src="imgPrefix + details.idCardUrl"
              style="display: none"
            />
            <span class="click-style" @click="werImg('idCardUrl')">查看</span>
          </td>
          <td class="td-value" v-else>暂无</td>
        </tr>

        <tr>
          <td class="td-label">入住时间</td>
          <td class="td-value" colspan="3">{{ details.checkInTime }}</td>
        </tr>
      </table>
    </div>

    <div slot="footer"></div>
  </public-modal>
</template>
<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import publicModal from '@/components/publicModal'
import { ajaxGetDictItems } from '@/api/api'
import { getPrefixImg } from '../../../utils/util'
export default {
  name: 'detailModal',
  components: { publicModal },
  data() {
    return {
      publicVisible: false,
      details: {},

      imgPrefix: '',
    }
  },
  methods: {
    show(records) {
      this.getDist()
      this.details = records
      this.publicVisible = true
    },

    async getDist() {
      let { result: static_server } = await ajaxGetDictItems({ code: 'static_server' })
      this.imgPrefix = getPrefixImg()
    },

    get_age(target) {
      const specifiedDate = new Date(target)
      const currentDate = new Date()
      const yearDifference = currentDate.getFullYear() - specifiedDate.getFullYear()
      return yearDifference
    },

    werImg(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: true,
        button: true,
        navbar: true,
        title: false,
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show()
    },

    handleOk() {
      this.publicVisible = false
    },
    cancel() {
      this.publicVisible = false
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .modalCotent {
  padding: 20px 40px;
  border-radius: 0 0 4px 4px;
}

/deep/ .modalFooter {
  height: 0 !important;
}

table {
  border-collapse: collapse;
}
tr {
  height: 46px;
  font-size: 14px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
}
.td-label {
  background: var(--theme-modal-label-bg);
  border: 0.01rem solid var(--theme-input-border);
  color: var(--theme-tab-text-color);
  width: 120px;
  text-align: center;
}

.td-value {
  background: var(--theme-container-bg);
  border: 0.01rem solid var(--theme-input-border);
  color: var(--theme-modal-label-value-color);
  padding-left: 25px;
  width: 200px;
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.click-style {
  color: #47e829;
  cursor: pointer;
}
</style>
